<template>
  <BePage>
    <BeTabs :tabList="tabList" v-model:activeKey="activeKey" hideAdd @edit="onEdit" type="editable-card" @handleListEmit="handleRecord" />
  </BePage>
</template>

<script lang="ts" setup>
import { useTabs } from '@/components/basics/BeTabs'
import List from './components/List.vue'
import Details from './components/Details.vue'
defineOptions({ name: 'LogAudit' })

// state
const { tabList, activeKey, addTab, onEdit, removeTab } = useTabs([{ key: 'default', title: '日志审计', component: markRaw(List), closable: false }])

// provide
provide('page', { addTab })
const handleRecord = (data: any) => {
  addTab({ key: `details`, title: `日志详情`, props: { record: data }, component: markRaw(Details), closable: true })
}
watch(
  () => activeKey.value,
  (val) => {
    if (val === 'default') {
      removeTab('details')
    }
  }
)
</script>
<style lang="scss"></style>
